<template>
  <page-dialog
    v-model:visible="shows"
    title="加入故障库"
    :width="tableDialogInfo.width"
    :bt-loading="tableDialogInfo.btLoading"
    :bt-list="tableDialogInfo.btList"
  >
    <!-- form -->
    <page-form
      class="paddingBox order-model-formBox flex_wrap_start_start"
      v-model:ref-obj="tableDialogForm.ref"
      :data="tableDialogForm.data"
      :field-list="tableDialogForm.fieldList"
      :rules="tableDialogForm.rules"
      :label-width="tableDialogForm.labelWidth"
    >
      <template v-slot:form-faultClassifyId>
        <el-tree-select
          v-model="tableDialogForm.data.faultClassifyId"
          :data="treeInfo.data"
          check-strictly
          :render-after-expand="false"
          show-checkbox
        />
      </template>
      <template v-slot:form-classifyTypeValue>
        <el-input
          v-model="tableDialogForm.data.classifyTypeValue"
          type="input"
          :disabled="true"
          placeholder="请选择资产分类"
        >
          <template #append>
            <el-icon @click="openAssetClassifyWindow"><MoreFilled /></el-icon>
          </template>
        </el-input>
      </template>
    </page-form>
  </page-dialog>
  <SelectAssetClassify
    v-if="selectAssetClassifyInfo.visible"
    v-model:showDialog="selectAssetClassifyInfo.visible"
    :saveEmpty="true"
    :check-box="false"
    :highlight-row="true"
    @callback="selectAssetClassifyInfoCallBack"
  />
</template>

<script setup name="addFault">
import { addSettingsFaultLibrary, getFaultClassifyTree } from "@/api/repair.js";

const { proxy } = getCurrentInstance();
const emit = defineEmits(["update", "callback", "reset"]);
const props = defineProps({
  showDialog: {
    type: Boolean,
  },
  data: {
    type: Object,
  },
});
const treeInfo = ref({
  data: [],
});
// 故障弹窗相关
const tableDialogInfo = ref({
  visible: false,
  type: "",
  width: "40%",
  btLoading: false,
  btList: [
    {
      label: "关闭",
      type: "",
      icon: "",
      event: handleClose,
      show: true,
    },
    {
      label: "保存",
      type: "primary",
      icon: "",
      event: saveUser,
      saveLoading: false,
      show: true,
    },
  ],
});

// 故障表单相关
const tableDialogForm = ref({
  ref: null,
  data: props.data,
  fieldList: [
    {
      type: "slot",
      label: "故障分类",
      clearable: true,
      required: true,
      value: "faultClassifyId",
    },
    {
      label: "报修类型",
      value: "repairType",
      type: "select-model",
      code: "repair_type_enum",
      required: true,
      disabled: true,
    },
    {
      label: "资产分类",
      value: "classifyTypeValue",
      type: "slot",
      required: true,
      disabled: true,
    },
    {
      label: "维修类别",
      value: "notAssetRepairType",
      type: "select-model",
      code: "not_asset_repair_type",
      required: true,
      disabled: true,
    },
    {
      label: "状态",
      value: "status",
      type: "radio-model",
      code: "new_enabled_type",
    },
    {
      label: "故障描述",
      value: "faultDescribe",
      type: "textarea",
      required: true,
      maxlength: 500,
    },
    {
      label: "故障原因",
      value: "faultReason",
      type: "textarea",
      maxlength: 500,
    },
    {
      label: "维修方案",
      value: "maintenanceScheme",
      type: "textarea",
      maxlength: 500,
    },
  ],
  rules: {
    faultClassifyId: [
      { required: true, message: "请选择故障分类", trigger: "change" },
    ],
    repairType: [
      { required: true, message: "请选择故障类型", trigger: "change" },
    ],
    classifyTypeValue: [
      { required: true, message: "请选择资产分类", trigger: "change" },
    ],
    notAssetRepairType: [
      { required: true, message: "请选择维修类别", trigger: "change" },
    ],
    status: [{ required: true, message: "请选择状态", trigger: "change" }],
    faultDescribe: [
      { required: true, message: "请输入故障描述", trigger: "blur" },
    ],
  },
  labelWidth: "150px",
});

const selectAssetClassifyInfo = reactive({
  visible: false,
  saveEmpty: true,
  query: {},
});

watch(
  () => tableDialogForm.value.data.repairType,
  (val) => {
    // 1资产报修  2 非资产报修
    tableDialogForm.value.fieldList.map((item) => {
      if (item.value == "classifyTypeValue") {
        item.show = val == 1;
        item.required = val == 1;
      }
      if (item.value == "notAssetRepairType") {
        item.show = val == 2;
        item.required = val == 2;
      }
    });
    for (const key in tableDialogForm.value.rules) {
      if (Object.hasOwnProperty.call(tableDialogForm.value.rules, key)) {
        if (key == "classifyTypeValue") {
          tableDialogForm.value.rules[key][0].required = val == 1;
        }
        if (key == "notAssetRepairType") {
          tableDialogForm.value.rules[key][0].required = val == 2;
        }
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
onMounted(() => {
  getFaultClassifyTree().then((res) => {
    if (res.success) {
      treeInfo.value.data = getTree(res.data);
    }
  });
});
function getTree(row) {
  if (row && row.length) {
    row.map((i) => {
      i.label = i.name;
      i.value = i.id;
      if (i.children && i.children.length) {
        getTree(i.children);
      }
    });
  }
  return row;
}
let shows = computed({
  get() {
    return props.showDialog;
  },
  set(newValue) {
    emit("update:showDialog", newValue); // 更新父组件shows
  },
});

function openAssetClassifyWindow() {
  //   if (tableDialogForm.value.data.repairType == "1") {
  //     selectAssetClassifyInfo.visible = true;
  //   }
}

function selectAssetClassifyInfoCallBack(row) {
  if (row) {
    tableDialogForm.value.data["classifyType"] = row.id;
    tableDialogForm.value.data["classifyTypeValue"] = row.name;
  } else {
    tableDialogForm.value.data["classifyType"] = -2;
    tableDialogForm.value.data["classifyTypeValue"] = "";
  }
}

// 关闭弹窗前的回调
function handleClose() {
  shows.value = false;
  emit("reset");
}

function saveUser() {
  tableDialogForm.value.ref.validate((valid) => {
    if (valid) {
      let api = addSettingsFaultLibrary;
      const params = {
        faultClassifyId: tableDialogForm.value.data.faultClassifyId,
        repairType: tableDialogForm.value.data.repairType,
        classifyType: tableDialogForm.value.data.classifyType,
        notAssetRepairType: tableDialogForm.value.data.notAssetRepairType,
        status: tableDialogForm.value.data.status,
        faultDescribe: tableDialogForm.value.data.faultDescribe,
        faultReason: tableDialogForm.value.data.faultReason,
        maintenanceScheme: tableDialogForm.value.data.maintenanceScheme,
      }
      console.log(params);
      api(params).then((res) => {
        if (res.success) {
            proxy.$message.success('操作成功')
            handleClose()
        }
      });
    }
  });
}
</script>

<style scoped></style>
